<template>
    <div class="root">
        <div :id="videoId" class="container" :ref="videoId"></div>
    </div>
</template>

<script>
export default {
    props:{
        src:{
            type:String,
            default:''
        },
        // 容器ID
        videoId:{
            type:String,
            default:'singleVideo'
        },
        videoVoice:{
            type:Boolean,
            default: true
        }
    },
    data(){
        return{
            jessibuca:null,

            flag:false,
            container:null,
            buffer:null,
            showBandwidth:true,
            showOperateBtns:true,
            forceNoOffscreen:false,
            playUrl:'',
            playing:false,
            quieting:true,
            loaded:false,
        }
    },
    watch:{
        src:{
            handler(url){
                if(url){
                    // this.createJessibuca()
                    if(url.indexOf('http') !== -1 ||url.indexOf('https') !== -1){
                        this.playUrl = url
                    }else{
                        console.log(url)
                        url = url.replace('/','_')
                        this.playUrl = `http://47.106.166.98:9082/rtp/${url}.live.flv`
                    }
                    setTimeout(() => {
                        this.jessibuca.play(this.playUrl)
                        this.jessibuca.setVolume(this.videoVoice ? 50 : 0)
                    }, 100);
                }
            },
            immediate:true,
            deep:true
        },
        videoVoice(v){
            if(v){
                this.jessibuca.setVolume(50)
            }else{
                this.jessibuca.setVolume(0)
            }
        }
    },
    mounted(){
        this.$nextTick(()=>{
            // 初始化播放器
            this.createJessibuca()
            this.jessibuca.setVolume(this.videoVoice ? 50 : 0)
        })
    },
    destroyed(){
      if (this.jessibuca) {
        this.jessibuca.destroy();
      }
      this.createJessibuca();
      this.playing = false;
      this.loaded = false;
    },
    methods:{
        createJessibuca(){
            this.jessibuca = new (window).JessibucaPro({
                container: this.$refs[this.videoId],
                // decoder: '/decoder-pro.wasm',
                videoBuffer: 0.2, // 缓存时长
                isResize: false,
                text: "",
                // background: "bg.jpg", // 封面图
                loadingText: "加载中",
                hasAudio:true, // 不对音频数据解码，提升性能
                debug: false,
                showBandwidth: this.showBandwidth, // 显示网速
                supportDblclickFullscreen: this.showBandwidth, // 双击全屏
                operateBtns: {
                fullscreen: this.showOperateBtns, // 全屏
                ptz: false, // 云台
                screenshot: this.showOperateBtns,  // 截图
                play: this.showOperateBtns, // 播放暂停
                audio: this.showOperateBtns, // 声音按钮
                record : false, // 录制按钮
                rotate : true, // 旋转按钮
                //   quality: showOperateBtns, // 清晰度选择
                },
                controlAutoHide:false,
                qualityConfig: ['普清', '高清', '超清', '4K', '8K'],
                forceNoOffscreen: this.forceNoOffscreen,
                isNotMute: false,
                watermarkConfig: {  // 设置右上角标题
                    text:{
                        content:''
                    },
                    right: 10,
                    top: 10
                },
            })
            this.jessibuca.on("load", function () {
                console.log("on load");
            });
            this.jessibuca.on("log", function (msg) {
                console.log("on log", msg);
            });
            this.jessibuca.on("record", function (msg) {
                console.log("on record:", msg);
            });
            this.jessibuca.on("pause",  ()=> {
                console.log("on pause");
                this.playing = false;
            });
            this.jessibuca.on("ptz",  (e)=> {
                this.clickControl(e)
                console.log("on ptz",e);
            });
            this.jessibuca.on("play",  ()=>{
                console.log("on play");
                this.playing = true;
                this.loaded = true;
                this.quieting = this.jessibuca.isMute();
            });
            this.jessibuca.on("fullscreen", function (msg) {
                console.log("on fullscreen", msg);
            });
            this.jessibuca.on("mute", function (msg) {
                console.log("on mute", msg);
                this.quieting = msg;
            });
            this.jessibuca.on("mute", function (msg) {
                console.log("on mute2", msg);
            });
            this.jessibuca.on("audioInfo", function (msg) {
                console.log("audioInfo", msg);
            });
            this.jessibuca.on("videoInfo", function (info) {
                console.log("videoInfo", info);
            });
            this.jessibuca.on("error", function (error) {
                console.log("error", error);
            });
            this.jessibuca.on("timeout", function () {
                console.log("timeout");
            });
            this.jessibuca.on('start', function () {
                console.log('start');
            })
            this.jessibuca.on("performance", function (performance) {
                var show = "卡顿";
                if (performance === 2) {
                show = "非常流畅";
                } else if (performance === 1) {
                show = "流畅";
                }
            });
            this.jessibuca.on('buffer', function (buffer) {
                console.log('buffer', buffer);
            })
            this.jessibuca.on('stats', function (stats) {
                console.log('stats', stats);
            })
            this.jessibuca.on('kBps', function (kBps) {
                // console.log('kBps', kBps);
            });
            // 显示时间戳 PTS
            this.jessibuca.on('videoFrame', function () {
            })
            //
            this.jessibuca.on('metadata', function () {
            });
            let i = 0; 
            this.jessibuca.on('rotate',  ()=> {
                let angle = [0,90,180,270]
                i += 1
                if(i >= angle.length){
                    console.log(i)
                    this.jessibuca.setRotate(0)
                    i = 0
                }else{
                    this.jessibuca.setRotate(angle[i])
                }
            });
        },
        // 云台控制
        clickControl(direction){
            // this.$datav.ptzControl({command:direction,horizonSpeed: 70,verticalSpeed: 70,zoomSpeed: 70}).then(res => {
            //     console.log(res)
            // }).catch((err) => {console.log(err)}) 
        }
    }
}
</script>

<style lang='scss' scoped>
.root {
    display: flex;
    width: 100%;
    height: 100%;
}
.container {
    background: rgba(13, 14, 27, 0.7);
    width: 100%;
    height: 100%;
}
@media (max-width: 720px) {
    .container {
        width: 90vw;
        height: 52.7vw;
    }
}
</style>